<template>
  <m-layout>
    <mt-header slot="header" title="客户详情" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="datail">
      <mt-field label="学员状态"  >
        <select @change='getStudentStatus' ref='studentStatus'>
          <option value='3' selected>跟进中</option>
          <option value ="4">流失学员</option>
        </select>
      </mt-field>

      <div class='base-info'>
        <mt-cell title="姓名" :value="getSaleStudent.name"></mt-cell>
        <mt-cell title="性别" :value="sexList[getSaleStudent.sex]"></mt-cell>
        <mt-cell title="拨打电话" >
          <a class="tel" :href="'tel:' + getSaleStudent.parentMobile" style='color:#4192f3;'>{{getSaleStudent.parentMobile}}</a>
        </mt-cell>
      </div>

      <mt-navbar v-model="selected">
        <mt-tab-item id="/sale/detail/follow">
          <router-link
          :to='{path: "/sale/detail/follow", query:{student_id: studentId}}'
          > 跟进</router-link>
        </mt-tab-item>
        <mt-tab-item id="/sale/detail/test-class">
          <router-link
          :to='{path: "/sale/detail/test-class", query:{student_id: studentId}}'>试课</router-link>
        </mt-tab-item>
        <mt-tab-item id="/sale/detail/info">
          <router-link
          :to='{path: "/sale/detail/info", query:{student_id: studentId}}'>资料</router-link>
        </mt-tab-item>
      </mt-navbar>
      <router-view>展示子页面的内容 </router-view>
    </div>
    <div slot="bottom"  v-if='$route.path == "/sale/detail/follow" || $route.path == "/sale/detail/test-class"' >
      <!-- 跟进的 -->
      <m-flexbox :gutter="8" v-if='$route.path == "/sale/detail/follow"'>
        <m-flexbox-item >
          <router-link
          :to='{path: "/sale/detail/add-follow", query:{student_id: getSaleStudent.studentId}}' >
            <mt-button  size="large">添加跟进记录</mt-button>
          </router-link>
        </m-flexbox-item>
        <m-flexbox-item  >
          <router-link
          :to='{path: "/sale/apply-registration", query:{student_id: getSaleStudent.studentId}}' >
            <mt-button type="primary" size="large">办理报名</mt-button>
          </router-link>
        </m-flexbox-item>
      </m-flexbox>
      <!-- 试课 -->
      <router-link :to='{path: "/sale/course", query:{student_id: getSaleStudent.studentId}}'
      v-if='$route.path == "/sale/detail/test-class"' >
        <mt-button type="primary" size="large">添加试课</mt-button>
      </router-link>
    </div>
  </m-layout>
</template>

<script>
import saleApi from 'api/sale.js'
import { mapGetters } from 'vuex'

export default {
  components: {
  },
  computed: {
    ...mapGetters({
      getSaleStudent: 'sale/getSaleStudent',
      getStudentTestClassList: 'sale/getStudentTestClassList'
    }),
    selected: {
      get () {
        return this.$route.path
      },
      set (value) {
      }
    }
  },
  data () {
    return {
      studentStatus: '',
      studentInfo: {},
      // 测试：机构-seedp543713, 销售员-seedp532476
      // 生产：机构-seedp32756,  销售员-seedp34209
      studentId: '',
      followRecordList: [],
      sexList: {
        1: '男',
        2: '女'
      }
    }
  },
  mounted () {
    this.studentId = this.$route.query.student_id
    this.$store.dispatch('sale/getSaleStudent', {studentId: this.studentId})
    this.$store.dispatch('sale/getStudentTestClassList', {studentId: this.studentId})
  },
  methods: {
    // 修改学员状态后要-请求跟进进度
    getStudentStatus () {
      this.studentStatus = this.$refs.studentStatus.value
      saleApi.updateSaleStudentStatus({
        id: this.getSaleStudent.id,
        studentId: this.studentId,
        status: this.studentStatus
      }).then((res) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.datail{
  .base-info{
    margin: 0.2rem 0;
  }
}
</style>

<style lang="scss" >
.datail{
  .mint-navbar .mint-tab-item.is-selected {
    margin-bottom: 0px;
  }
}
</style>
